Getting Started

Maxvid is a HTML/CSS template based on Bootstrap framework. It allows to built impressive, better & faster, mobile friendly websites.

HTML Structure

This is the base of each HTML file:


                <!-- Start of header
                ============================================= -->
                <header>
                ...
                </header>
                <!-- End of header
                ============================================= -->

                <!-- Start of section name
                ============================================= -->
                <section id="section-name-id" class="section-name-class">
                ...
                </section>
                <!-- End section name
                ============================================= -->

                
                <!-- Start of footer
                ============================================= -->
                <footer>
                ...
                </footer>
                <!-- End of footer
                ============================================= -->

Grid System

Maxvid Template supporst all features of Bootstrap Grid System - go to Bootrstrap's page and check how does it work.

Configuration

The template includes some configurable elements - here you will find informations how to use them!

Main Slidre Setting

                <div id="slider-wrapper" class="slider-content-wrap">
                <div class="slider-layer-item position-relative slider-type-one">
                <div class="slider-main-img img-zooming" data-background="Put Your Image Path here"></div>
                <div class="container">
                <div class="slider-text-innerbox headline pera-content">
                ---
                ---
                ---
                </div>
                </div>
                </div>
                <div class="slider-layer-item position-relative slider-type-two">
                <div class="slider-main-img img-zooming" data-background="Put Your Image Path here"></div>
                <div class="container">
                <div class="slider-text-innerbox text-center headline pera-content">
                ---
                ---
                ---
                </div>
                </div>
                </div>
                <div class="slider-layer-item position-relative slider-type-three">
                <div class="slider-main-img img-zooming" data-background="Put Your Image Path here"></div>
                <div class="container">
                <div class="slider-text-innerbox  headline pera-content">
                ----
                ----
                ----
                </div>
                </div>
                </div>
                </div>

Foodige Menu

              <ul id="tabs" class="nav text-uppercase nav-tabs">
              <li class="nav-item"><a href="#" data-target="#brakfast" data-toggle="tab" class="nav-link text-capitalize active">Tab Title Name</li>
              <li class="nav-item"><a href="#" data-target="#lunch" data-toggle="tab" class="nav-link text-capitalize">Tab Title Name</li>
              <li class="nav-item"><a href="#" data-target="#evening" data-toggle="tab" class="nav-link text-capitalize">Tab Title Name</li>
              <li class="nav-item"><a href="#" data-target="#dinner" data-toggle="tab" class="nav-link text-capitalize">Tab Title Name</li>
              </ul>

              <div id="tabsContent" class="tab-content">
              <div id="brakfast" class="tab-pane fade active show">
              -----
              ------
              -------
              </div>
              <div id="lunch" class="tab-pane fade">
              -----
              ------
              -------
              </div>
              <div id="evening" class="tab-pane fade">
              ------
              --------
              ----------
              </div>
              <div id="dinner" class="tab-pane fade">
              ------
              --------
              ----------
              </div>

Special Package Slider

              <div id="package-slide-id" class="special-package-slider">
              <div class="package-slide-item headline pera-content">
              -----
              -----
              -----
              </div>
              <div class="package-slide-item headline pera-content">
              -----
              -----
              -----
              </div>
              <div class="package-slide-item headline pera-content">
              -----
              -----
              -----
              </div>
              </div>

Testimonail Slider

              <div id="testimonial-id" class="testimonial-slider-area owl-carousel">
              <div class="testimonial-inner-item">
              <div class="testimonial-img-area position-relative float-left">
              ------
              -----
              -----
              </div>
              </div>
              <div class="testimonial-inner-text headline pera-content">
              -------
              -------
              -------
              </div>
              </div>
              </div>
              <div class="testimonial-inner-item">
              <div class="testimonial-img-area position-relative float-left">
              ------
              -----
              -----
              </div>
              </div>
              <div class="testimonial-inner-text headline pera-content">
              -------
              -------
              -------
              </div>
              </div>
              </div>
              <div class="testimonial-inner-item">
              <div class="testimonial-img-area position-relative float-left">
              ------
              -----
              -----
              </div>
              </div>
              <div class="testimonial-inner-text headline pera-content">
              -------
              -------
              -------
              </div>
              </div>
              </div>
              </div>

Google map markup & style

          <iframe id="iframemap" class="google-map" src="https://maps.google.com/maps?q=newyork&ie=UTF8&iwloc=&output=embed" width="100%" height="380"></iframe>

Files & Credits

CSS & JS Files

The template uses more CSS & JS files:

Bootstrap - https://mdbootstrap.com/ - (more at credicts)
Owl Carousel 2 - https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html - (more at credicts)
Fontawesome icons - https://fontawesome.com/ - (more at credicts)

Fodige Documentation